import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import {Checkbox as VanillaCheckbox} from 'vanilla-starter/Checkbox';
import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox';
import '../../tailwind/tailwind.css';
import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';

export const tags = ['input'];
export const relatedPages = [{'title': 'useCheckbox', 'url': 'Checkbox/useCheckbox.html'}];
export const description = 'Allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.';

# Checkbox

<PageDescription>{docs.exports.Checkbox.description}</PageDescription>

<ExampleSwitcher>
  <VisualExample
    component={VanillaCheckbox}
    docs={docs.exports.Checkbox}
    links={docs.links}
    props={['children', 'isIndeterminate', 'isDisabled']}
    initialProps={{children: 'Remember me'}}
    type="vanilla"
    files={["starters/docs/src/Checkbox.tsx", "starters/docs/src/Checkbox.css"]} />
  <VisualExample
    component={TailwindCheckbox}
    docs={docs.exports.Checkbox}
    links={docs.links}
    props={['children', 'isIndeterminate', 'isDisabled']}
    initialProps={{children: 'Remember me'}}
    type="tailwind"
    files={["starters/tailwind/src/Checkbox.tsx"]} />
</ExampleSwitcher>

## Selection

Use the `isSelected` or `defaultSelected` prop to set the selection state, and `onChange` to handle selection changes. The `isIndeterminate` prop overrides the selection state regardless of user interaction.

```tsx render wide docs={docs.exports.Checkbox} links={docs.links} props={['isIndeterminate']}
"use client";
import {Checkbox} from 'vanilla-starter/Checkbox';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <Checkbox
        {...props}
        ///- begin highlight -///
        isSelected={selected}
        onChange={setSelection}
        /* PROPS */
        ///- end highlight -///
      >
        Subscribe
      </Checkbox>
      <p>{`You are ${props.isIndeterminate ? 'partially subscribed' : selected ? 'subscribed' : 'unsubscribed'}`}</p>
    </>
  );
}
```

## Forms

Use the `name` and `value` props to submit the checkbox to the server. Set the `isRequired` prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.

```tsx render
"use client";
import {Checkbox} from 'vanilla-starter/Checkbox';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';;

<Form>
  <Checkbox
    ///- begin highlight -///
    name="terms"
    value="agree"
    isRequired>
    {/*- end highlight -*/}
    I agree to the terms
  </Checkbox>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>
```

## API

<Anatomy />

```tsx links={{Checkbox: '#checkbox'}}
<Checkbox>Label</Checkbox>
```

### Checkbox

<PropTable component={docs.exports.Checkbox} links={docs.links} />
